<html>
<title>动画</title>

<head>
    <script src="./js/vue.js"></script>
    <style>
        p {
            width: 300px;
            height: 300px;
            background-color: red;
        }

        .fade-enter-active,
        .fade-leave-active {
            transition: all 2s ease;
        }

        .fade-enter-active {
            opacity: 1;
            width: 300px;
            height: 300px;
        }

        .fade-leave-active {
            opacity: 0;
            width: 100px;
            height: 100px;
        }
         /*  fade-enter需要放到fade-enter-active后面 */
        .fade-enter {
            opacity: 0;
            width: 100px;
            height: 100px;
        }
    </style>
</head>

<body>
    <div class="container">
        <button @click="flag=!flag">点击</button>
        <transition-group name="fade" 
        @befor-enter="beforeEnter"
        @enter="enter"
        @after-enter="afterEnter"
        @before-leave="beforeLeave"
        @leave="leave"
        @after-leave="afterLeave">
            <p v-show="flag" :key="1"> Hello World</p>
            <p v-show="flag" :key="2"> 你好 World</p>
        </transition-group>
    </div>
    <script>
        var vm = new Vue({
            data: {
                flag: false
            },
            methods: {
                beforeEnter(){
                    alert("动画进入之前");
                },
                enter(){
                    alert("动画进入");
                },
                afterEnter(){
                    alert("动画进入之后");
                },
                beforeLeave(){
                    alert("动画离开之前");
                },
                leave(){
                    alert("动画离开");
                },
                afterLeave(){
                    alert("动画离开之后");
                }
            },
            directives: {
                
            }
        }).$mount('.container');
    </script>

</body>

</html>